/**
 * @author:linjiye
 * @date: 2024/12/27
 * @desc:
 **/

import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useState} from 'react'
import {useThemeColor} from "@/hooks/useThemeColor";
import {FcView} from "@/components/FcView";
import {FcText} from "@/components/FcText";
import {LinearGradient} from "expo-linear-gradient";
import LinearGradientText from "@/components/LinearGradientText";

type Props = {
    lightColor?: string,
    darkColor?: string,
    type?: 'default' | 'txtJB' | 'txtJBAndBjJB' | 'txtJBAndBkJB' | 'BjJB' | 'txtBK',
    colorList?: Array<any>,
    borderWidth?: number,
    textName: string,
    fontSize: number,
    style?: [{
        marginHorizontal: number;
        borderRadius: number;
        width: number;
        lineHeight: number;
        marginBottom: number;
        height: number
    }]
}

const defaultColorList = [
    {
        offset: '0%',
        stopColor: '#2856FF',
        stopOpacity: "1"
    }, {
        offset: '100%',
        stopColor: '#BE46FF',
        stopOpacity: "1"
    }
]

const FcButton = ({
                      style,
                      itemStyle,
                      itemTextStyle,
                      lightColor,
                      darkColor,
                      type = 'default',
                      colorList = defaultColorList,
                      borderWidth,
                      textName,
                      fontSize = 14,
                      btnLeftEle,
                      disable = false,
                      disableColors = ['rgba(105,137,255,0.4)', 'rgba(198,94,253,0.4)'],
                      colors = ['rgba(51,77,176,1)', 'rgba(198,94,253,1)'],
                        onClick,
                      positionEle,
                      ...rest
                  }: Props) => {
    const color = useThemeColor({light: lightColor, dark: darkColor}, 'text');

    const [textWidth, setTextWidth] = useState(0);
    const [textHeight, setTextHeight] = useState(0);
    const [borderW, setBorderWidth] = useState(borderWidth);

    const handleLayout = (event) => {
        const {width, height} = event.nativeEvent.layout;
        setTextWidth(width);
        setTextHeight(height);
    };

    const handleClick = () => {
        onClick && !disable && onClick()
    }

    return (
        <TouchableOpacity activeOpacity={disable?1:0.3} onPress={() => handleClick()}
            onLayout={handleLayout}
            style={[
                {color},
                type === 'default' ? styles.default : undefined,
                type === 'txtJBAndBjJB' ? styles.txtJBAndBjJB : undefined,
                style
            ]}
            {...rest}
        >
            {/*<TouchableOpacity activeOpacity={disable?1:0.3} onPress={() => handleClick()}>*/}
                {type === 'default' &&
                    <View style={[styles.default_wrap, itemStyle, {borderWidth: borderWidth}]}>
                        <Text style={[itemTextStyle]} numberOfLines={1} ellipsizeMode="tail">{textName}</Text>
                    </View>
                    // <Text style={[styles.default_wrap, itemStyle, {borderWidth: borderWidth}]}>{textName}</Text>
                }
                {
                    type === 'txtBK' &&
                    <View style={[styles.default_wrap,styles.txtBK_wrap, itemStyle, {borderWidth: borderWidth}]}>
                        <Text style={[styles.txtBK_text,itemTextStyle]} numberOfLines={1} ellipsizeMode="tail">{textName}</Text>
                    </View>
                }
                {type === 'txtJBAndBkJB' &&
                    <LinearGradient colors={disable ? disableColors : colors}
                                    style={[itemStyle, styles.txtJBAndBkJB_wrap]}
                                    start={{x: 0, y: 0}}
                                    end={{x: 1, y: 1}}
                    >
                        <View style={[itemStyle, styles.txtJBAndBkJB_wrap_item, {
                            backgroundColor: style.backgroundColor ? style.backgroundColor : 'white',
                            width: textWidth - borderW * 2,
                            height: textHeight - borderW * 2
                        }]}>
                            {/*<Text>{textName}</Text>*/}
                            <LinearGradientText textName={textName} colorList={colorList} fontSize={fontSize}/>
                        </View>
                    </LinearGradient>
                }
                {type === 'txtJBAndBjJB' &&
                    <LinearGradient colors={disable ? disableColors : colors}
                                    style={[styles.txtJBAndBjJB_wrap, itemStyle]}
                                    start={{x: 0, y: 0}}
                                    end={{x: 1, y: 1}}
                    >
                        <LinearGradientText textName={textName} colorList={colorList} fontSize={fontSize}/>
                    </LinearGradient>
                }
                {type === 'BjJB' &&
                    <LinearGradient colors={disable ? disableColors : colors}
                                    style={[styles.BjJB_wrap, itemStyle]}
                                    start={{x: 0, y: 0}}
                                    end={{x: 1, y: 1}}
                    >
                        {btnLeftEle && <>{btnLeftEle}</>}
                        <Text style={[styles.BjJB_wrap_item, itemStyle]} numberOfLines={1} ellipsizeMode="tail">{textName}</Text>
                    </LinearGradient>
                }
                {positionEle && <>{positionEle}</>}
            {/*</TouchableOpacity>*/}
        </TouchableOpacity>
    )
}

export default FcButton

const styles = StyleSheet.create({
    default: {
        display: 'flex',
        justifyContent: "center",
        alignItems: "center"
    },
    txtJBAndBjJB: {
        color: 'white'
    },
    txtJBAndBkJB_wrap: {
        flex: 1,
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
    },
    txtJBAndBkJB_wrap_item: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: "center",
        alignItems: "center",
    },
    txtJBAndBjJB_wrap: {},
    txtJBAndBjJB_wrap_item: {},
    default_wrap: {
        color: 'rgba(0, 0, 0, 0.9)',
        borderColor: 'rgba(0, 0, 0, 0.1)',
        // borderWidth: 1,
        borderRadius: 8,
        fontSize: 14,
        // display: 'flex',
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        // width: 100,
        // height: 40
        // paddingHorizontal: 10,
        paddingVertical: 5
    },
    txtBK_wrap: {
        borderColor: '#2856FF',
    },
    txtBK_text: {
        color: '#2856FF'
    },
    BjJB_wrap: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    BjJB_wrap_item: {
        // width: '100%',
        // height: '100%',
        borderRadius: 8,
        color: 'white',
        display: 'flex',
        alignItems: "center",
        justifyContent: "center"
    }
})